<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <!-- 搜索 clearable:清空数据，@clear:查询数据-->
        <el-input v-model="xx" placeholder=""
          ><template #append>
            <el-button @click="getls()"
              ><el-icon><Search /></el-icon
            ></el-button>
          </template> </el-input
      ></el-col>
      <!--------------------------- 添加用户 -------------------------------->
      <el-col :span="4"
        ><el-button type="primary" @click="addDialogVisible = true" round
          >添加用户</el-button
        >
      </el-col>
      <el-dialog
        title="添加用户(请填写完整)"
        v-model="addDialogVisible"
        width="50%"
      >
        添加用户内容底部区域
        <el-form label-width="70px">
          <el-form-item label="学号">
            <el-input v-model="sid" placeholder=""></el-input>
          </el-form-item>

          <el-form-item label="介绍">
            <el-input v-model="mal" placeholder=""></el-input>
          </el-form-item>

          <el-form-item label="时间">
            <el-input v-model="date" placeholder=""></el-input>
          </el-form-item>

          <!-- <el-form-item label="选题详情">
            <el-input v-model="ssz" placeholder=""></el-input>
          </el-form-item> -->
        </el-form>
        <span  class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="inserttestlog()">确 定</el-button>
        </span>
      </el-dialog>
    </el-row>

    <el-table :data="user" stripe>
      <el-table-column type="index"></el-table-column>

      <el-tableColumn label="学号" prop="sid"></el-tableColumn>
      <el-tableColumn label="介绍" prop="mal"></el-tableColumn>
      <el-tableColumn label="时间" prop="date"></el-tableColumn>
      <!-- <el-tableColumn label="选题详情" prop="ssz"></el-tableColumn> -->
      <el-tableColumn label="操作" width="180px" key="slot">
        <!-------------------------------- 查看详情按钮 ---------------------------------->
        <!-- <el-button type="" size="mini" @click="showDialogVisible = true" round
          ><el-icon><user /></el-icon
        ></el-button> -->
        <!-------------------------------- 修改用户按钮 ---------------------------------->
        <template #default="scope">
          <el-button
            type="primary"
            size="mini"
            @click="editDialogVisible = true"
            round
            ><el-icon><Edit /></el-icon
          ></el-button>

          <!------------------------------- 删除用户按钮 ------------------------------>
          <el-button
            type="danger"
            size="mini"
            @click="deletetestlog(scope.row)"
            round
            ><el-icon><Delete /></el-icon
          ></el-button>
        </template>
        <!---------------分配角色按钮,tooltip:提示框,enterable:自动隐藏 -------------->
      </el-tableColumn>
    </el-table>
    <!-- 查看答题详情界面 -->
    <!-- <el-dialog title="答题详情" v-model="showDialogVisible" width="20%">
      <div>
        <ul>
          <li v-for="i in 93" :key="i" class="infinite-list-item">
            {{ i }} {{ tmp[i - 1] }}
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <span slot="footer" class="dialog-footer">
          <el-button @click="showDialogVisible = false">退出</el-button>
        </span>
      </span>
    </el-dialog> -->
    <!-- 修改用户界面 -->
    <el-dialog title="修改用户资料" v-model="editDialogVisible" width="50%">
      <el-form label-width="70px">
        <el-form-item label="学号">
          <el-input
            v-model="updatesid"
            placeholder="您要修改的该学生学号"
          ></el-input>
        </el-form-item>

        <el-form-item label="介绍">
          <el-input v-model="updatemal" placeholder=""></el-input>
        </el-form-item>

        <el-form-item label="时间">
          <el-input v-model="updatedate" placeholder=""></el-input>
        </el-form-item>
        <!-- <el-form-item label="选题详情">
          <el-input v-model="updatessz" placeholder=""></el-input>
        </el-form-item> -->
      </el-form>
      <span  class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatetestlog()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="删除用户资料" v-model="deleteDialogVisible" width="50%">
      <!-- 添加用户内容底部区域 -->
      <el-form label-width="70px">
        <el-form-item label="学号">
          <el-input v-model="deletesid" placeholder="Please input" ></el-input>
        </el-form-item>
      </el-form>
      <span  class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deletetestlog()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { h } from "vue";
import { ElNotification } from "element-plus";
import { ref } from "vue";
export default {
  data() {
    return {
      sid: ref(""),
      mal: ref(""),
      date: ref(""),
      ssz: ref(""),
      updatesid: ref(""),
      updatemal: ref(""),
      updatedate: ref(""),
      updatessz: ref(""),
      deletesid: ref(""),
      tmp: [],
      showDialogVisible: false,
      addDialogVisible: false,
      editDialogVisible: false,
      deleteDialogVisible: false,
      user: [],
      xx: ref(""),
    };
  },
  created() {
    this.getls();
  },
  methods: {
    // 获取用户列表数据（getUserList）
    getls() {
      this.user = []
      this.$axios
        .get("/gettestlog", { params: { xx: this.xx|| '' } })
        .then((res)=> {
           console.log(res,"data====>");
          this.tmp = res["data"]["ssz"];
          if(!res.data){ 
            that.user=[]
          }else if(JSON.stringify(res.data).split('}').length<=2){
            this.user.push(res.data)
          }else{
            let temp = res.data.replace(/}{/g,"}${").split('$')
            console.log(temp,"data1====>");
            temp = temp.map(item=>{
              item = JSON.parse(item)
              return item
            })
            console.log(temp,"data====>");
            this.user = temp
          }
        });
    },
    showDialogClosed() {
      this.$refs.showUserFormRef.resetFields();
    },
    addDialogClosed() {
      this.$refs.addUserFormRef.resetFields();
    },
    editDialogClosed() {
      this.$refs.editUserFormRef.resetFields();
    },
    deleteDialogClosed() {
      this.$refs.editUserFormRef.resetFields();
    },
    inserttestlog() {
      const that = this;
      this.$axios
        .get("/inserttestlog", {
          params: {
            sid: this.sid,
            mal: this.mal,
            date: this.date,
            ssz: this.ssz,
          },
        })
        .then(function (response) {
          console.log("插入成功！");
          ElNotification({
            title: "成功",
            message: h("i", { style: "color: coral" }, "用户已插入数据库"),
          });
        });
    },
    updatetestlog() {
      const that = this;
      this.$axios
        .get("/updatetestlog", {
          params: {
            sid: this.updatesid,
            mal: this.updatemal,
            date: this.updatedate,
            ssz: this.updatessz,
          },
        })
        .then(function (response) {
          console.log("修改成功！");
          ElNotification({
            title: "成功",
            message: h("i", { style: "color: coral" }, "用户已插入数据库"),
          });
        });
    },
    deletetestlog(row) {
      const that = this;
      this.$axios
        .get("/deletetestlog", {
          params: {
            sid: row.sid,
          },
        })
        .then(function (response) {
          console.log("删除成功！");
          ElNotification({
            title: "成功",
            message: h("i", { style: "color: coral" }, "用户已在数据库删除"),
          });
          that.getls()
        });
    },
  },
};
</script>

<style lang="less" scoped></style>
